<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<style type="text/css">
.phone{
	  	/*margin: -90px 0px;*/ 
	  	margin: 10px auto !important;
	  	float:right;
	  }
	  
	.phone:before {
	    content: '';
	    width: 60px;
	    height: 10px;
	    border-radius: 10px;
	    position: absolute;
	     left:50%; 
	    margin-left: -30px;
	     background:#333; 
	    top: 50px;
	}
	  
	.phone .statusbar {
	    position: absolute;
	    width: 320px;
	    height: 20px;
	   	background:url('');
	    left: 50%;
	    margin-left: -160px;
	    top: 100px;
	    -webkit-background-size: 100% auto;
	    background-size: 100% auto;
	}
	  
	.phone:after {
	    content: '';
	    position: absolute;
	    width: 60px;
	    height: 60px;
	    left: 50%;
	    margin-left: -30px;
	    bottom: 20px;
	    border-radius: 100%;
	    box-sizing: border-box;
	    border: 5px solid #333;
	}
	.phone{
			background: #111;
			border-radius: 0px;
			box-shadow: none;
			width: 100%;
			height: 568px;
			padding: 0;
	}
	.phone {
		margin: 0 auto;
		position: relative;
		background: #111;
		border-radius: 55px;
		box-shadow: 0px 0px 0px 2px #aaa;
		width: 320px;
		height: 568px;
		padding: 105px 25px;
		-webkit-box-sizing: content-box;
		box-sizing: content-box;
	}

	.phone iframe {
		width: 320px;
		height: 100%;
		display: block;
		width: 100%;
		margin-top: 20px;
	}
	
	.pc_preview{
		width: 70%;
		min-height:790px;
		float: left;
		border-right: 1px solid gray;
	}
</style>
</head>
<body style="padding-top:40px;">
	<div class="phone">
		<iframe src="mobile.jsp" frameborder="0" scrolling="yes"></iframe>
		<div class="statusbar"></div>
	</div>
</body>
</html>